<template>
  <button
    class="job-card flex flex-col items-center p-6 border border-gray-200 rounded-lg hover:border-primary group"
    :style="{ backgroundColor: selected ? '#88a9ec' : 'white' }" 
    @click="handleClick" 
  >
  <div :class="`job-icon ${bgClass} p-3 mb-4 text-white flex justify-center items-center`">
    <i :class="iconClass" class="text-30xl"></i>
  </div>




    <span class="text-lg font-medium mb-2 group-hover:text-primary">{{ title }}</span>
    <p class="text-sm text-gray-500 text-center">{{ description }}</p>
  </button>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue';

// 定义从父组件传递的props
const props = defineProps({
  iconClass: {
    type: String,
    required: true,
  },
  bgClass: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  }
});

// 定义emit事件
const emit = defineEmits(['selectJob']);

// 记录当前卡片的选中状态
const selected = ref(false);

// 处理点击事件，触发父组件的selectJob事件
const handleClick = () => {
  selected.value = !selected.value; // 切换选中状态
  emit('selectJob', { ...props, selected: selected.value }); // 传递当前岗位信息和选中状态
};
</script>

<style scoped>
.job-card {
  transition: all 0.3s ease;
}

.job-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.job-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.bg-tech {
  background: linear-gradient(135deg, #4080ff 0%, #87b1ff 100%);
}

.bg-design {
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa3a3 100%);
}

.bg-product {
  background: linear-gradient(135deg, #845ef7 0%, #b197fc 100%);
}

.bg-sales {
  background: linear-gradient(135deg, #40c057 0%, #8ce99a 100%);
}

.bg-hr {
  background: linear-gradient(135deg, #f76707 0%, #ffb366 100%);
}

.bg-finance {
  background: linear-gradient(135deg, #1098ad 0%, #66d9e8 100%);
}

</style>
